import React,{Component} from "react";
import Header from '../components/all/header';
import Footer from "../components/all/footer";

import {apilink} from "../api/apilink"
import SmallBanner from "../components/index/small_banner"
import 'antd/dist/antd.css';
import {SIndex,SBigBanner} from '../styled/index' 

import Swiper2  from "swiper/swiper-bundle.js"
import "swiper/swiper-bundle.css";

import store from "../store/index";
import {get_all_list_info , get_goods_kinds} from "../store/actionCreator"

export default class home extends Component{
    constructor(props){
        super(props)
        this.state={
            swiper:""
        }
    }
    componentDidMount(){
        //请求总数据
            apilink("api/getall","get").then((ok)=>{
            // console.log(ok.data);
            store.dispatch(get_all_list_info(ok.data));
            // console.log(store.getState().indexReducer.state);
            if(sessionStorage.getItem("state")){
                
            }else{
                sessionStorage.setItem("state",JSON.stringify(store.getState().indexReducer.state))
            }
        }).catch((err)=>{
            console.log(err)
        })
        
        //初始化轮播图
        new Swiper2('.swiper-big', {
            autoHeight: true, //enable auto height
            spaceBetween: 20,
            loop: true,
            autoplay:true,
          });
          this.setState({
            swiper:new Swiper2('.swiper-big', {
                autoHeight: true, 
                spaceBetween: 20,
                loop: true,
                autoplay:true,
              })
          })
    }
    MouseEnter(){
        this.state.swiper.autoplay.stop();
    }
    MouseLeave(){
        this.state.swiper.autoplay.start();
    }
    jumpRouterKind(router,kind){
        this.props.history.push("/list");
        store.dispatch(get_goods_kinds(kind));

    }
    render(){
        return(
            <div>
                <Header></Header>
                {/* 大banner */}
                <SBigBanner>
                <div className="bigbanner content" onMouseEnter={this.MouseEnter.bind(this)}  onMouseLeave={this.MouseLeave.bind(this)}>
                    <div class="swiper-big">
                    <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/bannerbg.jpg" alt="加载错误" /></div>
                    <div class="swiper-slide"><img src="images/bannerbg(2).jpg" alt="加载错误" /></div>
                    <div class="swiper-slide"><img src="images/bannerbg(3).jpg" alt="加载错误" /></div>
                    <div class="swiper-slide"><img src="images/bannerbg(4).jpg" alt="加载错误" /></div>
                    </div>
                </div>
                </div>
                </SBigBanner>
                <SIndex>
                {/* 新品上市 banner 轮播 */}
                {/* <SmallBanner kind="xianlian">
                    <div className="title_bar">
                        <h1>新品推荐</h1>
                        <h1>NEW RECOMMENDL</h1>
                    </div>
                </SmallBanner> */}
                <SmallBanner kind="all">
                    <div className="title_bar">
                        <h1>新品推荐</h1>
                        <h1>NEW RECOMMENDL</h1>
                    </div>
                </SmallBanner>
                {/* 活动 */}
                <div className="active content">
                    <div className="active_top">
                        <h1>别出心裁-礼品</h1>
                        <h1>INGENIOUS GIFT</h1>
                    </div>
                    <div className="active_left">
                        <img src="images/img_07.png" alt=""/>
                    </div>
                    <div className="active_right">
                        <p>发掘我们推荐的精美礼品</p>
                        <img src="images/img_08.png" alt=""/>
                        <div className="btn_wrap"><button onClick={this.jumpRouterKind.bind(this,"/list","lianzhui")}>寻找礼品</button></div>
                    </div>
                </div>
                <div className="active content">
                    <div className="active_top">
                        <h1>至美臻选</h1>
                        <h1>THE BEST CHOICE</h1>

                    </div>
                    <div className="active_left_two">
                        <p>制造爱的小心思</p>
                        <img src="images/img_08.png" alt=""/>
                        <div className="btn_wrap"><button onClick={this.jumpRouterKind.bind(this,"/list","xianlian")}>寻找礼品</button></div>
                    </div>
                    <div className="active_right_two">
                        <img src="images/img_07.png" alt=""/>
                    </div>
                </div>
                {/* 分享 */}
                <div className="share content">
                    <div className="active_top">
                        <h1>分享喜悦</h1>
                        <h1>SHARE THE JOYS</h1>
                    </div>
                   <ul>
                       <li><img src="images/fx(1).jpg" alt="加载错误"/></li>
                       <li><img src="images/fx(9).jpg" alt="加载错误"/></li>
                       <li><img src="images/fx(4).jpg" alt="加载错误"/></li>
                       <li><img src="images/fx(10).jpg" alt="加载错误"/></li>
                       <li><img src="images/fx(3).jpg" alt="加载错误"/></li>
                   </ul>
                </div>
                </SIndex>
                <Footer></Footer>
            </div>
        )
    }
}